<template>
    <div id="reference_chart" style="width: 100%;height: 500px;"></div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts'
import { onMounted, reactive, getCurrentInstance, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';

type EChartsOption = echarts.EChartsOption;

// 引入路由
const router = useRouter()

// 引入消息函数
const message = useMessage()

// api访问代理
const { proxy } = getCurrentInstance() as any

const props = defineProps([
    'pid'
])

onMounted(() => {
    initCharts()
})

const option: EChartsOption = reactive({
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
    },
    series: [
        {
            type: 'tree',
            data: [],
            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',
            symbolSize: 7,
            label: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 9
            },
            leaves: {
                label: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left'
                }
            },
            emphasis: {
                focus: 'descendant'
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
        }
    ]
});

let data = ref({})

const initCharts = (() => {
    var chartDom = document.getElementById("reference_chart")!;
    var myChart = echarts.init(chartDom);
    myChart.showLoading();

    proxy.$api.paper.relatedTree({ id: props.pid }).then((result: any) => {
        myChart.hideLoading();
        if (result.success) {
            data.value = result.data;
            (option.series as any)[0].data = [data.value];
            option && myChart.setOption(option);
            myChart.on('click', (param) => {
                if ((param.data as any).id !== "-1" && (param.data as any).id !== "") {
                    let router_data = router.resolve({ name: 'PaperIntro', params: { id: (param.data as any).id } })
                    window.open(router_data.href, '_blank')
                }
            })
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})
</script>

<style scoped>
</style>